<template>
  <!-- 主容器，支持暗黑模式 -->
  <view class="container" :class="{ dark: isDark }">
    <!-- 状态栏 -->
    <view class="status-bar"></view>

    <!-- 个人信息卡片 -->
    <view class="profile-card card">
      <!-- 顶部区域：头像和基本信息 -->
      <view class="profile-top">
        <view class="left-section">
          <!-- 用户头像 -->
          <image class="avatar-img" :src="user.avatar"></image>
          <!-- 用户信息 -->
          <view class="profile-info">
            <text class="name">{{ user.username }}</text>
            <text class="account">账号：{{ user.email }}</text>
          </view>
        </view>

        <!-- 编辑按钮 -->
        <view class="edit-btn" @click="goToEdit">编辑</view>
      </view>

      <!-- 小车信息 -->
      <view class="car-info">
        <text class="car-label">当前小车：</text>
        <text class="car-name">{{ user.carname }}</text>
      </view>
    </view>

    <!-- 更多功能区域 -->
    <view class="more-section card">
      <text class="more-text">更多功能开发中...</text>
    </view>

    <!-- 底部安全区域 -->
    <view class="bottom-safe-area"></view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      isDark: false, // 是否暗黑模式
      user: {        // 用户信息对象
        id: 20,      // 用户ID
        username: '', // 用户名
        email: '',    // 用户邮箱
        carname: '',  // 小车名称
        avatar: '/static/avatar.png'  // 默认头像路径
      }
    }
  },

  // 页面显示生命周期
	mounted() {
    // 获取全局暗黑模式设置
    this.isDark = getApp().globalData.darkMode;

    // 根据暗黑模式设置导航栏颜色
    if (this.isDark) {
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#1e1e1e'
      });
    } else {
      uni.setNavigationBarColor({
        frontColor: '#000000',
        backgroundColor: '#F8F8F8'
      });
    }
	console.log(this.user.id)
    // 获取用户信息
    this.fetchUserInfo();
  },

  // 方法定义
  methods: {
    /**
     * 跳转到编辑页面
     */
    goToEdit() {
      uni.navigateTo({
        url: '/pages/edit-profile/edit-profile'
      });
    },

    /**
     * 从服务器获取用户信息
     */
    fetchUserInfo() {
      uni.request({
        url: `http://localhost:8080/update/${this.user.id}`, 
        method: 'GET',
        success: (res) => {
          console.log('接口返回:', res);
          if (res.data.code === 1 && res.data.data) {
            // 更新用户信息，保留头像
            this.user = {
              ...res.data.data,
              avatar: this.user.avatar
            };
          } else {
            // 获取失败提示
            uni.showToast({
              title: '获取用户信息失败',
              icon: 'none'
            });
          }
        },
        fail: () => {
          // 网络错误提示
          uni.showToast({
            title: '网络错误',
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>
<style lang="scss">
/* 主容器样式 */
.container {
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom); // 底部安全区域
  background: linear-gradient(135deg, #f7f7f7 0%, #e8e8e8 100%);
  color: #333;
}

/* 状态栏样式 */
.status-bar {
  height: 44px;
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
}

/* 顶部区域布局 */
.profile-top {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}

/* 左侧区域样式 */
.left-section {
  display: flex;
  align-items: center;
  flex: 1;    // 占据剩余空间
  min-width: 0; // 防止内容溢出
}

/* 头像样式 */
.avatar-img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-right: 32rpx;
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
}

/* 个人信息样式 */
.profile-info {
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
  overflow: hidden;
}

/* 用户名样式 */
.name {
  font-size: 36rpx;
  font-weight: 700;
  color: #333;
  white-space: nowrap; // 不换行
  overflow: hidden;
  text-overflow: ellipsis; // 超出显示省略号
}

/* 账号样式 */
.account {
  font-size: 28rpx;
  color: #999;
  margin-top: 8rpx;
  text-overflow: ellipsis;
}

/* 编辑按钮样式 */
.edit-btn {
  padding: 8rpx 20rpx;
  font-size: 24rpx;
  color: #ff6b35;
  border: 1rpx solid #ff6b35;
  border-radius: 12rpx;
  flex-shrink: 0; // 防止按钮被压缩
}

/* 卡片通用样式 */
.card {
  margin: 32rpx;
  border-radius: 24rpx;
  background: white;
  box-shadow: 0 16rpx 64rpx rgba(0,0,0,0.06);
}

/* 个人信息卡片特定样式 */
.profile-card {
  padding: 48rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 小车信息区域样式 */
.car-info {
  margin-top: 40rpx;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

/* 小车标签样式 */
.car-label {
  font-size: 28rpx;
  color: #666;
}

/* 小车名称样式 */
.car-name {
  font-size: 32rpx;
  color: #ff6b35;
  font-weight: 600;
  margin-left: 16rpx;
}

/* 更多功能区域样式 */
.more-section {
  padding: 48rpx;
  text-align: center;
}

/* 更多功能文字样式 */
.more-text {
  color: #aaa;
  font-size: 28rpx;
}

/* 暗黑模式样式覆盖 */
.dark {
  background: #121212;
  color: #ccc;
}

.dark .status-bar {
  background: linear-gradient(135deg, #444 0%, #222 100%);
}

.dark .card {
  background: #1e1e1e;
  box-shadow: 0 16rpx 64rpx rgba(0, 0, 0, 0.8);
}

.dark .name {
  color: #fff;
}

.dark .account {
  color: #aaa;
}

.dark .car-label {
  color: #aaa;
}

.dark .car-name {
  color: #ff9800;
}

.dark .more-text {
  color: #666;
}
</style>